<template>
  <a-modal
    v-model:visible="visible"
    :footer="false"
    simple
    hide-title
    modal-class="!p-0px h-800px !w-400px !rounded-16px"
  >
    <a-form :model="form" :style="{ width: '400px' }" @submit="handleSubmit">
      <div class="p-20px">
        <a-form-item field="game_id" label="游戏">
          <a-select
            v-model="form.game_id"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
            placeholder="请选择游戏"
          >
            <a-option v-for="game in gameList" :value="game.id" :key="game.id">{{
              game.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="rank_id" label="最高段位">
          <a-select
            v-model="form.rank_id"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
            placeholder="请选择最高段位"
          >
            <a-option v-for="rank in rankList" :value="rank.id" :key="rank.id">{{
              rank.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="positions" label="擅长位置">
          <a-select
            v-model="form.position_ids"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
            placeholder="请选择擅长位置"
            multiple
            :max-tag-count="3"
            allow-clear
          >
            <a-option
              v-for="positions in positionsList"
              :value="positions.id"
              :key="positions.id"
              >{{ positions.name }}</a-option
            >
          </a-select>
        </a-form-item>
        <a-form-item field="type" label="陪玩类型">
          <a-select
            v-model="form.type"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
            placeholder="请选择陪玩类型"
          >
            <!-- 陪玩类型 0分钟 1局数 2天数 -->
            <a-option :value="0">分钟</a-option>
            <a-option :value="1">局数</a-option>
            <a-option :value="2">天数</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="screenshots" label="游戏截图">
          <Upload @success="handleSuccess">
            <div class="flex justify-center items-center w-140px h-140px rounded-8px bg-[#f7f8fa]">
              <div class="arco-upload-picture-card-text" v-if="!form.screenshots">
                <IconPlus />
              </div>
              <div v-else class="h-full">
                <img class="w-full h-full object-cover" :src="form.screenshots" alt="" />
              </div>
            </div>
          </Upload>
        </a-form-item>

        <a-form-item field="gold_coin" label="金币">
          <!-- <div>gold_coin</div> -->
          <a-input
            v-model="form.gold_coin"
            placeholder="请输入金币数量"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
          ></a-input>
        </a-form-item>
        <a-form-item field="play_time" label="陪玩时间">
          <a-input
            v-model="form.play_time"
            placeholder="请输入陪玩时间"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
          ></a-input>
        </a-form-item>

        <a-form-item field="game_info" label="介绍">
          <div class="w-300px rounded-8px flex flex-row items-center">
            <textarea
              v-model="form.game_info"
              placeholder="简单自我介绍一下吧"
              maxlength="200"
              class="input area w-full max-h-200px min-h-100px rounded-8px"
              type="text"
            />
          </div>
        </a-form-item>
        <a-form-item>
          <div class="submit">
            <button
              class="px-16px box-border h-32px rounded-8px bg-gradient-to-r from-#FF4DC4 to-#7733FF text-14px font-bold text-white hover:scale-105 transition"
              html-type="submit"
            >
              保存
            </button>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, computed, watchEffect } from 'vue'
import { useVModel } from '@vueuse/core'
import { getAllGame } from '@/api/game'
import Upload from '@/components/upload/index.vue'
import { IconPlus } from '@arco-design/web-vue/es/icon'
const props = defineProps(['visible'])
const emits = defineEmits(['update:visible', 'save'])
const visible = useVModel(props, 'visible', emits)
const gameList = ref([])
const rankList = computed(() => {
  return gameList.value.find((game) => game.id === form.game_id)?.ranks || []
})
const positionsList = computed(() => {
  return gameList.value.find((game) => game.id === form.game_id)?.positions || []
})
const form = reactive({
  game_id: '',
  rank_id: '',
  position_ids: [],
  type: 0,
  screenshots: '',
  gold_coin: '',
  play_time: '',
  game_info: ''
})
watchEffect(() => {
  if (form.game_id) {
    form.rank_id = ''
    form.position_ids = []
  }
})
const handleSubmit = () => {
  const params = {
    ...form,
    position_ids: form.position_ids.join(','),
    gold_coin: Number(form.gold_coin),
    play_time: Number(form.play_time)
  }
  emits('save', params)
  // createSkill({
  // ...form,
  // position_ids: form.position_ids.join(','),
  // gold_coin: Number(form.gold_coin),
  // play_time: Number(form.play_time)
  // }).then((res) => {
  //   console.log(res)
  // })
}
const handleSuccess = (res) => {
  form.screenshots = res
}
onMounted(() => {
  getAllGame().then((res) => {
    // console.log(res)
    gameList.value = res
  })
})
console.log('add load')
</script>
<style lang="less" scoped>
.input {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  outline: none;
  padding: 10px;
}
.input:focus {
  box-shadow: 0 0 0 2px #7733ff;
  border: 1px solid transparent;
}
.area {
  overflow-y: hidden;
}
.user-info {
  &&::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.select {
  height: 44px;
  width: 300px;
  border: 1px solid #d9d9d9;
  padding-left: 10px;
}
::v-deep(.arco-select-view-single) {
  background-color: transparent !important;
  padding: 0;
}

::v-depp(.arco-select-view) {
  background-color: red !important;
  border-color: red !important;
  box-shadow: none !important;
}
::v-deep(.arco-input-wrapper) {
  background-color: transparent !important;
}
</style>
